<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Employee Info</title>
  <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
  <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="text-align:
center;" id="dataTable">
  <tr>
    <th colspan="5">Employee Info</th>
  </tr>
  <tr>
    <th>id</th>
    <th>lastName</th>
    <th>email</th>
    <th>gender</th>
    <th>options(<a th:href="@{/toAdd}">add</a>)</th>
  </tr>
  <tr th:each="employee : ${employeeList}">
    <td th:text="${employee.id}"></td>
    <td th:text="${employee.lastName}"></td>
    <td th:text="${employee.email}"></td>
    <td th:text="${employee.gender}"></td>
    <td>
      <a class="deleteA" @click="deleteEmployee"
         th:href="@{'/employee/'+${employee.id}}">delete</a>
      <a th:href="@{'/employee/'+${employee.id}}">update</a>
    </td>
  </tr>
</table>
<!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 -->
<form id="delete_form" method="post">
  <!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 -->
  <input type="hidden" name="_method" value="delete"/>
</form>
</body>
<script type="text/javascript">
  var vue = new Vue({
    el:"#dataTable",
    methods:{
        //event表示当前事件
        deleteEmployee:function (event) {
          //通过id获取表单标签
          var delete_form = document.getElementById("delete_form");
          //将触发事件的超链接的href属性为表单的action属性赋值
          delete_form.action = event.target.href;
          //提交表单
          delete_form.submit();
          //阻止超链接的默认跳转行为
          event.preventDefault();
      }
    }
  });
</script>
</html>